<!--
 * @Author: wei_jt@ecidi.com
 * @Date: 2019-09-26 11:31:26
 * @LastEditors: zhong_m
 * @LastEditTime: 2022-04-18 11:09:34
 * @Description: 角色配置
 -->
<template>
  <div class="role-container">
    <drawer-layout left-width="60%">
      <template v-slot:left="{ setFolded }">
        <fks-query-page
          ref="table"
          v-loading="loading"
          :data="list"
          :current-page.sync="currentPage"
          :page-sizes="[20, 50, 100]"
          :page-size.sync="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :table-name="LANG.STM_ROLE"
          :border="false"
          highlight-current-row
          @row-click="roleRowClick"
          @query="getRoles"
          @sort-change="sortHandler"
        >
          <template slot="singleSearch">
            <div class="single-searchBox">
              <fks-input
                v-model="searchValue"
                size
                class="single-searchBox-item"
                maxlength="50"
                :placeholder="LANG.SEARCH_PLACEHOLDER"
                clearable
                @keyup.native.enter="searchRole"
                @clear="searchRole"
              >
                <fks-button
                  slot="append"
                  icon="fks-icon-search"
                  @click="searchRole"
                />
              </fks-input>
              <fks-button
                v-permission="['role:add']"
                type="primary"
                icon="fks-icon-plus"
                @click="addRole"
              >
                {{ LANG.ADD }}
              </fks-button>
            </div>
          </template>
          <template>
            <fks-table-column
              type="index"
              align="center"
              label="#"
              width="60"
            />
            <fks-table-column
              :label="LANG.NAME"
              is-link
              prop="name"
              sortable="custom"
              min-width="120"
              header-align="center"
              align="left"
              @link="authView"
            />
            <fks-table-column
              :label="LANG.CODE"
              min-width="120"
              prop="code"
              sortable="custom"
              header-align="center"
              align="left"
            />
            <fks-table-column
              type="wide"
              prop="remark"
              :label="LANG.REMARK"
              header-align="center"
              align="left"
            />
            <fks-table-column
              v-if="currentType == LANG.COMMON"
              min-width="80"
              :label="LANG.PORTAL"
              header-align="center"
              align="center"
              sortable="custom"
              prop="type"
            >
              <div slot-scope="scope">
                <span v-if="scope.row.isGeneral">
                  {{ getCommonRoleLevel(scope.row) }}
                </span>
              </div>
            </fks-table-column>
            <fks-table-column
              prop="isGeneral"
              :render-header="roleSelect"
              header-row-class-name="selectRole"
              align="center"
              header-align="center"
              min-width="80"
            >
              <div slot-scope="scope">
                <span v-if="scope.row.isGeneral">
                  {{
                    currentType == LANG.COMMON
                      ? ""
                      : getCommonRoleLevel(scope.row, " - ")
                  }}
                  {{ LANG.COMMON }}
                </span>
                <span v-if="!scope.row.isGeneral">
                  {{ LANG.PRIVATE }}
                </span>
              </div>
            </fks-table-column>
            <fks-table-column
              :label="LANG.OPERATION"
              width="200"
              class-name="role-operation"
              align="left"
            >
              <template slot-scope="scope">
                <fks-button
                  v-if="
                    !(
                      scope.row.roleCode === 'superManager' ||
                      (portal.type > portalType[0].code && scope.row.isGeneral)
                    )
                  "
                  v-permission="['role:auth']"
                  type="text"
                  @click.stop="authEdit(scope.row)"
                >
                  {{ LANG.AUTH }}
                </fks-button>
                <fks-button
                  v-if="
                    !(
                      scope.row.roleCode === 'superManager' ||
                      (portal.type > portalType[0].code && scope.row.isGeneral)
                    )
                  "
                  v-permission="['role:edit']"
                  type="text"
                  @click.stop="handleEdit(scope.row)"
                >
                  {{ LANG.EDIT }}
                </fks-button>
                <fks-button
                  v-if="
                    !(
                      scope.row.roleCode === 'superManager' ||
                      (portal.type > portalType[0].code && scope.row.isGeneral)
                    )
                  "
                  v-permission="['role:delete']"
                  danger-text
                  @click.stop="handleDelete(scope.row)"
                >
                  {{ LANG.DELETE }}
                </fks-button>
              </template>
            </fks-table-column>
          </template>
        </fks-query-page>
      </template>
      <template #right>
        <div class="right-container">
          <div class="right-page-title">
            <div class="fks-title-icon" style="margin-top: 8px" />
            <span class="table-title table-title-name"
              >{{ roleName }}-成员列表</span
            >
          </div>
          <div />
          <template>
            <fks-row>
              <fks-col :span="24">
                <fks-tabs v-model="memberType" style="margin-top: 4px">
                  <fks-tab-pane :label="LANG.USER" name="user" />
                  <fks-tab-pane :label="LANG.ORGANIZATION" name="org" />
                  <fks-tab-pane :label="LANG.POST" name="post" />
                </fks-tabs>
              </fks-col>
            </fks-row>
          </template>
          <fks-query-page
            v-if="!commonRole"
            ref="peopleTable"
            v-loading="memberLoading"
            class="memberPage"
            :data="memberList"
            :current-page.sync="memberPage"
            :page-size.sync="memberSize"
            :total="memberTotal"
            @row-click="rowClick"
            @query="fetchData"
            @sort-change="peopleSortHandler"
            @selection-change="handleSelect"
          >
            <template slot="singleSearch">
              <div class="single-searchBox">
                <fks-input
                  v-model="selectName"
                  size
                  style="width: auto; margin-right: 8px"
                  :placeholder="
                    memberType == 'user'
                      ? LANG.MEMBER_SEARCH_PLACEHOLDER
                      : LANG.SEARCH_PLACEHOLDER
                  "
                  maxlength="50"
                  clearable
                  @clear="search"
                  @keyup.enter.native="search"
                >
                  <fks-button
                    slot="append"
                    icon="fks-icon-search"
                    @click="search"
                  />
                </fks-input>
                <fks-button
                  v-permission="['role:peopleDelete']"
                  style="margin-right: 8px"
                  icon="fks-icon-delete"
                  class="deleteButton"
                  @click="handleDeleteMember"
                >
                  {{ LANG.BATCH_DELETE }}
                </fks-button>
                <fks-user-selector-pro
                  v-if="memberType == 'user'"
                  style="width: auto"
                  ref="selector"
                  :username.sync="memberName"
                  :userfullname.sync="memberFullname"
                  :params="userSelectParams"
                  :multi-portal="false"
                  show-all-user
                  multiple
                  collapse-tags
                  :recent-user="false"
                  @change="addMember"
                >
                  <fks-button
                    slot="reference"
                    type="primary"
                    icon="fks-icon-plus"
                  >
                    <span>{{ LANG.ADD_USER }}</span>
                  </fks-button>
                </fks-user-selector-pro>
                <fks-org-selector-pro
                  v-if="memberType == 'org'"
                  ref="selector"
                  style="width: auto"
                  :multi-portal="false"
                  :multiple="true"
                  :dialog="true"
                  placeholder=""
                  @change="addOrg"
                >
                  <fks-button
                    slot="reference"
                    slot-scope="{ popflag, selectedArray, triggerDialog }"
                    icon="fks-icon-plus"
                    type="primary"
                    @click="triggerDialog"
                  >
                    <span>{{ LANG.ADD_ORG }}</span>
                  </fks-button>
                </fks-org-selector-pro>
                <fks-post-selector-pro
                  v-if="memberType == 'post'"
                  ref="selector"
                  style="width: auto"
                  :multi-portal="false"
                  :multiple="true"
                  :dialog="true"
                  placeholder=""
                  @change="addPost"
                >
                  <fks-button
                    slot="reference"
                    slot-scope="{ popflag, selectedArray, triggerDialog }"
                    icon="fks-icon-plus"
                    type="primary"
                    @click="triggerDialog"
                  >
                    <span>{{ LANG.ADD_POST }}</span>
                  </fks-button>
                </fks-post-selector-pro>
              </div>
            </template>
            <template>
              <fks-table-column width="55" type="selection" />
              <template v-if="memberType == 'user'">
                <fks-table-column
                  align="center"
                  :label="LANG.USER_FULL_NAME"
                  prop="userFullname"
                  sortable="custom"
                  min-width="120"
                />
                <fks-table-column
                  :label="LANG.USERNAME"
                  min-width="120"
                  prop="userName"
                  align="left"
                  sortable="custom"
                />
              </template>
              <template v-else>
                <fks-table-column
                  align="left"
                  :label="LANG.NAME"
                  prop="name"
                  sortable="custom"
                  min-width="120"
                />

                <fks-table-column
                  :label="LANG.REMARK"
                  min-width="120"
                  prop="remark"
                  align="left"
                  sortable="custom"
                />
              </template>
            </template>
          </fks-query-page>
          <div v-else class="commonRoleContainer">
            <div>
              <div class="noData" />
              <div>门户通用角色的成员，仅支持在各门户下查看或添加</div>
            </div>
          </div>
        </div>
      </template>
    </drawer-layout>
    <role-detail v-if="visible" :visible.sync="visible" :data="node" />
    <role-auth v-if="authVisible" :visible.sync="authVisible" :data="node" />
    <authorize-detail :data="node" :visible.sync="memberVisible" />
  </div>
</template>
<script>
import * as Auth from "./api";
import RoleDetail from "./RoleDetail";
import RoleAuth from "./RoleAuth";
import AuthorizeDetail from "./Authorize";
import Mix from "@/mixins/module";
import { ENUM } from "@/store/State/stateTypes";
import DrawerLayout from "@/components/DrawerLayout";
import AddUserGroup from "./component/AddUserGroup";
export default {
  name: "Role",
  filters: {},
  components: {
    RoleDetail,
    RoleAuth,
    AuthorizeDetail,
    DrawerLayout,
    AddUserGroup,
  },
  mixins: [Mix],
  data() {
    return {
      userSelectParams: {
        portalId: "",
      },
      list: [],
      currentPage: 1,
      pageSize: 20,
      total: 0,
      loading: false,
      keywords: "",
      visible: false,
      authVisible: false,
      memberVisible: false,
      node: {},
      //默认展开的节点数组
      defaultShowNodes: [],
      isGeneral: "",
      types: "",
      portalIds: this.portalId,
      searchValue: "",
      currentType: "",
      sort: "",
      columnName: "",
      peopleSort: "",
      peopleColumnName: "",
      deleteFlag: false,
      selectName: "",
      roleId: "",
      methodList: {
        user: {
          get: Auth.getRoleUser,
          delete: Auth.deleteRoleUser,
          save: Auth.saveRoleUser,
        },
        userGroup: {
          get: Auth.getRoleUserGroup,
          delete: Auth.deleteRoleUserGroup,
          save: Auth.saveRoleUserGroup,
        },
      },
      memberTotal: 0,
      memberList: [],
      memberPage: 1,
      memberSize: 20,
      delList: [],
      userNumber: 1,
      memberType: "user",
      memberLoading: false,
      showMemberDialog: false,
      activeName: "user",
      memberFullname: "",
      memberName: "",
      roleName: "",
      commonRole: false,
    };
  },
  computed: {
    portalId() {
      if (this.multiPortal) {
        return this.$store.state.portal.id;
      }
      return "";
    },
    portal() {
      return this.$store.state.portal;
    },
    portalType() {
      return this.$store.state[ENUM].portalType || [];
    },
    multiPortal() {
      return this.$store.getters.multiPortal;
    },
    roleType() {
      let data = [
        { name: this.LANG.ALL },
        { name: this.LANG.COMMON },
        { name: this.LANG.PRIVATE },
      ];
      return data;
    },
    memberTypeList() {
      return [
        { value: "user", label: this.LANG.USER, code: "" },
        { value: "org", label: this.LANG.ORGANIZATION, code: 2 },
        { value: "post", label: this.LANG.POST, code: 1 },
      ];
    },
    typeCode() {
      let type = this.memberTypeList.find(
        (item) => item.value == this.memberType
      );
      return type.code || "";
    },
    currentMethod() {
      return this.methodList[this.memberType == "user" ? "user" : "userGroup"];
    },
  },
  watch: {
    currentType: {
      handler: function (val) {
        this.clearSort();
        this.handleClick(val);
      },
    },
    roleType: {
      handler: function (nval, oval) {
        oval.forEach((item, index) => {
          if (item.name === this.currentType) {
            this.currentType = nval[index].name;
          }
        });
      },
    },
    memberType() {
      //init式获取数据
      this.initData();
      this.fetchData();
    },
  },
  mounted() {
    this.currentType = this.LANG.ALL;
  },
  methods: {
    searchRole() {
      this.currentPage = 1;
      this.getRoles();
    },
    roleRowClick(row) {
      if (this.roleId == row.id) {
        return;
      }
      if (row.isGeneral) {
        if (row.type != this.portal.type && this.multiPortal) {
          this.commonRole = true;
        }
      } else {
        this.commonRole = false;
      }
      this.roleId = row.id;
      this.roleName = row.name;
      this.fetchData();
    },
    changeRow(row) {
      if (this.roleId == row.id) {
        return;
      }
      this.roleId = row.id;
      this.fetchData();
    },
    addMember(userList) {
      if (userList.length < 1 || !userList[0].id) return false;
      this.memberType = "user";
      let addUserIdList = userList.map((item) => {
        return item.id;
      });
      this.addMembers(addUserIdList, "user");
    },
    addOrg(userList) {
      if (userList.length < 1) return false;
      // this.memberType = 'org'
      let addUserIdList = userList.map((item) => {
        return item.orgId;
      });
      this.addMembers(addUserIdList, "org");
    },
    addPost(userList) {
      if (userList.length < 1) return false;
      this.memberType = "post";
      let addUserIdList = userList.map((item) => {
        return item.id;
      });
      this.addMembers(addUserIdList, "post");
    },
    addMembers(addUserIdList, memberType) {
      this.listLoading = true;
      this.showMemberDialog = false;

      if (this.multiPortal) {
        let obj = Object.assign(
          { id: this.portalId },
          { addUserIdList: addUserIdList }
        );

        Auth.getPortals(obj)
          .then((res) => {
            if (res.status) {
              this.saveMember(addUserIdList, memberType);
            }
          })
          .catch(() => {
            this.listLoading = false;
          });
      } else {
        this.saveMember(addUserIdList, memberType);
      }
    },
    saveMember(userList, memberType) {
      const data = {
        roleId: this.roleId,
        userIdList: userList,
        userGroupIdList: userList,
        relationIdList: userList,
      };

      this.currentMethod
        .save(data)
        .then((res) => {
          if (res.status) {
            this.$message({
              message: this.LANG.SAVE_SUCCESS,
              type: "success",
            });
            this.$refs.selector.sureList = [];
            this.$refs.selector.ids = "";
            if (this.memberType == memberType) {
              this.fetchData();
            } else {
              this.memberType = memberType;
            }
          }
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    handleSelect(val) {
      this.delList = val.map((item) => {
        return item.id;
      });
    },
    rowClick(row) {
      this.$refs.peopleTable.$refs.table.toggleRowSelection(
        row,
        this.changeSelected(row)
      );
    },
    changeSelected(row) {
      let w = true;
      this.delList.forEach((item) => {
        if (item == row.id) {
          w = false;
        }
      });
      return w;
    },
    peopleSortHandler(data) {
      if (!data.order) {
        this.peopleSort = "";
        this.peopleColumnName = "";
      } else {
        this.peopleSort = data.order == "ascending" ? "asc" : "desc";
        this.peopleColumnName = data.prop;
      }
      this.fetchData();
    },

    initData() {
      this.memberPage = 1;
      this.memberSize = 20;
      this.selectName = "";
      this.peopleSort = "";
      this.peopleColumnName = "";
    },

    search() {
      this.memberPage = 1;
      this.fetchData();
    },
    fetchData() {
      if (!this.roleId) {
        return false;
      }
      this.memberLoading = true;
      const form = {
        pageNo: this.memberPage,
        pageSize: this.memberSize,
        searchValue: this.selectName,
        roleId: this.roleId,
        type: this.typeCode,
        sort: this.peopleSort,
        columnName: this.peopleColumnName,
      };
      this.getMemberData(form);
    },
    getMemberData(params) {
      this.currentMethod
        .get(params)
        .then((res) => {
          if (res.status && res.data) {
            this.memberList = res.data.list;
            this.memberTotal = res.data.total;
            this.handlerMemberData(this.memberList);
          }
          this.memberLoading = false;
        })
        .catch(() => {
          this.memberLoading = false;
        });
    },
    /**
     * @description: 切换角色是否通用后清空排序条件
     */
    clearSort() {
      this.$refs["table"].clearSort();
      this.sort = "";
      this.columnName = "";
    },
    /**
     * @description: 展示角色属于哪级门户
     */
    getCommonRoleLevel(row, extraStr = "") {
      if (!this.multiPortal) {
        return "";
      }
      return this.portalType[row.type - 1]
        ? this.portalType[row.type - 1][this.$lang] + extraStr
        : "";
    },
    sortHandler(data) {
      let params = {};
      if (!data.order) {
        this.sort = "";
        this.columnName = "";
      } else {
        this.sort = data.order == "ascending" ? "asc" : "desc";
        this.columnName = data.prop;
      }
      params = {
        types: this.types,
        portalId: this.portalIds,
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        isGeneral: this.isGeneral,
        searchValue: this.searchValue,
        sort: this.sort,
        columnName: this.columnName,
      };
      this.getRoleList(params);
    },
    getRoles() {
      if (this.multiPortal && this.portalType) {
        if (
          this.portal.type != this.portalType[0].code &&
          (this.isGeneral || this.isGeneral == "")
        ) {
          this.types = this.portal.type;
        } else {
          this.types = "";
        }
      } else {
        this.types = "";
      }
      let params = {
        types: this.types,
        portalId: this.portalIds,
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        isGeneral: this.isGeneral,
        searchValue: this.searchValue,
        sort: this.sort,
        columnName: this.columnName,
      };
      this.getRoleList(params);
    },
    @permission("role:query")
    getRoleList(params) {
      this.loading = true;
      Auth.getRoles(params)
        .then((res) => {
          this.loading = false;
          if (res.status && res.data) {
            this.list = res.data.list;
            this.total = res.data.total;
            this.roleName = res.data.list[0].name;
            if (res.data.list[0].isGeneral) {
              if (
                res.data.list[0].type != this.portal.type &&
                this.multiPortal
              ) {
                this.commonRole = true;
              }
            } else {
              this.commonRole = false;
            }
            this.$refs.table.$refs.table.setCurrentRow(res.data.list[0]);
            this.roleId = res.data.list[0].id;
            this.fetchData();
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    authView({ row }) {
      if (this.roleId == row.id) {
        return;
      }
      if (row.isGeneral) {
        if (row.type != this.portal.type && this.multiPortal) {
          this.commonRole = true;
        }
      } else {
        this.commonRole = false;
      }
      this.roleId = row.id;
      this.roleName = row.name;
      this.fetchData();
    },
    authEdit(row) {
      this.node = Object.assign({ operate: "edit" }, row);
      this.node.portalId = this.portalId;
      this.authVisible = true;
    },
    addChild(row) {
      this.node = { operate: "add", pathId: row.pathId, parentId: row.id };
      this.visible = true;
    },
    handleEdit(row) {
      this.node = Object.assign({}, row);
      this.node.operate = "edit";
      this.node.portalId = this.portalId;
      this.visible = true;
    },
    addRole() {
      this.node = {
        operate: "add",
        portalId: this.portalId,
        type: this.portal.type,
        isGeneral: false,
      };
      this.visible = true;
    },

    handleDeleteMember() {
      if (this.delList.length == 0) {
        switch (this.memberType) {
          case "user": {
            this.$message.error(this.LANG.DELETE_EMPTY_TIP);
            break;
          }
          case "org": {
            this.$message.error(this.LANG.DELETE_ORG_EMPTY_TIP);
            break;
          }
          case "post": {
            this.$message.error(this.LANG.DELETE_POST_EMPTY_TIP);
            break;
          }
        }
        return;
      }
      let deletip = "";
      switch (this.memberType) {
        case "user": {
          deletip = this.LANG.DELETE_USER_TIP;
          break;
        }
        case "org": {
          deletip = this.LANG.DELETE_ORG_TIP;
          break;
        }
        case "post": {
          deletip = this.LANG.DELETE_POST_TIP;
          break;
        }
      }
      this.$confirm(deletip, {
        title: this.LANG.TIPS,
        type: "warning",
        confirmButtonText: this.LANG.DELETE,
        cancelButtonText: this.LANG.CANCEL,
        confirmButtonClass: "fks-button--danger",
        deleteMode: true,
      })
        .then(() => {
          const data = {
            roleId: this.roleId,
            userIdList: this.delList,
            userGroupIdList: this.delList,
          };
          this.deleteMember(data);
        })
        .catch(() => {});
    },
    deleteMember(data) {
      this.currentMethod
        .delete(data)
        .then((res) => {
          if (res.status) {
            this.$message({
              message: this.LANG.DELETE_SUCCESS,
              type: "success",
            });
            this.fetchData();
          }
        })
        .catch(() => {});
    },
    handleDelete(val) {
      Auth.getRoleUser({
        portalId: this.portalId,
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        roleId: val.id,
      })
        .then((res) => {
          if (res.status && res.data.total > 0) {
            this.$confirm(this.LANG.CONFIRM_TIPS1, this.LANG.TIPS, {
              type: "warning",
              confirmButtonText: this.LANG.DELETE,
              cancelButtonText: this.LANG.CANCEL,
              deleteMode: true,
            })
              .then(() => {
                this.deleteRole(val.id);
              })
              .catch(() => {});
          } else {
            this.$confirm(this.LANG.CONFIRM_TIPS, this.LANG.TIP, {
              type: "warning",
              confirmButtonText: this.LANG.DELETE,
              cancelButtonText: this.LANG.CANCEL,
              confirmButtonClass: "fks-button--danger",
              deleteMode: true,
            })
              .then(() => {
                this.deleteRole(val.id);
              })
              .catch(() => {});
          }
        })
        .catch(() => {});
    },
    deleteRole(val) {
      Auth.deleteRole(val)
        .then((res) => {
          if (res.status) {
            this.$message({
              type: "success",
              message: this.LANG.DELETE_SUCCESS,
            });
            this.currentPage = 1;
            this.getRoles();
          }
        })
        .catch(() => {});
    },
    handleMember(row) {
      this.node = Object.assign({}, row);
      this.memberVisible = true;
    },
    handleClick(val) {
      if (val == this.LANG.COMMON) {
        this.portalIds = this.portalId;
        this.isGeneral = true;
      } else if (val == this.LANG.PRIVATE) {
        this.portalIds = this.portalId;
        this.isGeneral = false;
      } else {
        this.isGeneral = "";
        this.portalIds = this.portalId;
      }
      this.getRoles();
    },
    roleSelect(h, { column, $index }) {
      // 给表格添加包裹的div
      return h("div", {}, [
        // 添加el-select 标签
        h(
          "fks-select",
          {
            on: {
              input: (value) => {
                this.currentType = value;
              },
            },
            props: {
              value: this.currentType, // 给el-select 设置值（也是相当于v-model）
              size: "small",
              class: "selectRole",
              style: {
                height: "25px",
                width: "110px",
                paddingLeft: "0px",
                paddingRight: "0px",
              },
            },
          },
          [
            //给当前 el-select 设置 el-option
            this.roleType.map((item) => {
              return h("fks-option", {
                props: {
                  value: item.name,
                  label: item.name,
                },
              });
            }),
          ]
        ),
      ]);
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.role-container {
  width: 100%;
  min-width: 564px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: #f1f2f6;
  ::v-deep .right {
    width: calc(40% - 8px) !important;
    margin-left: 8px;
    .right-container {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 24px 32px 0 16px;
      overflow: hidden;
      background: #fff;
      .right-page-title {
        float: left;
        display: flex;
        line-height: 36px;
      }
      .table-title-name {
        width: 100%;
        font-weight: bold;
        font-size: 16px;
        word-break: break-all;
        color: #191919;
      }
    }
  }
  .memberPage {
    height: calc(100% - 94px);
    padding: 4px 12px 0 !important;
    ::v-deep .fks-table {
      height: calc(100% - 64px) !important;
    }
    ::v-deep .fks-query-pagebox {
      right: 12px;
    }
  }
  .deleteButton {
    border-color: #ff4d4f;
    color: #ff4d4f;
  }
}
.commonRoleContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100% - 105px);
  margin-bottom: 15px;
  font-size: 14px;
  text-align: center;
  color: #555;
  .noData {
    width: 200px;
    height: 144px;
    margin: 0 auto;
    background: url("../../../../assets/img/tips/noData.png") no-repeat 0 0;
  }
}

::v-deep .fks-table th > .cell .fks-input--small .fks-input__inner {
  border: none;
  text-align: center;
  background-color: transparent;
}

::v-deep .fks-select .fks-input .fks-select__caret {
  margin-top: -0.5px;
}

::v-deep .fks-table .fks-input--suffix .fks-input__inner {
  padding-left: 30px !important;
}
</style>

